<template>
    <svg :class="svgClass" aria-hidden="true">
      <use :href="symbolId" />
    </svg>
</template>

<script lang="ts" setup>
import { computed, } from "vue";

const props = defineProps<{ 
  className: string
  title:string
}>();

const symbolId = computed(() => `#icon-${props.title}`);
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return "svg-icon";
});

</script>

<style lang="less">
// .default {
// 	width: 16px;
// 	height: 16px;
// 	fill: currentColor;
// 	overflow: hidden;
// }
.svg-icon {
  vertical-align: -0.1em;
  fill: currentColor;
  overflow: hidden;
}
</style>

